<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">1</div>
    <div id="app1">1</div>
    <script>
        function Elem(id){
            this.elem = document.getElementById(id)
        }
        Elem.prototype.html = function(val){
            let elem = this.elem;
            console.log(elem)
            if(val){
                elem.innerHTML = val
                return this
            }else{
                return elem.innerHTML
            }
        }
        Elem.prototype.on = function(type,fn){
            let elem = this.elem
            elem.addEventListener(type,fn)
        }   
        let app = new Elem('app')
        app.html('<h1>dfadfadf</h1>').on('click',function(){
            alert('成功了')
        })
    </script>
    <script>
        function jquery(el){
            this.elem = document.getElementById(el)
        }
        jquery.prototype.html = function(val){
            let elem = this.elem
             elem.innerHTML=val
        } 
        jquery.prototype.on = function(type,fn){
            let elem = this.elem
            elem.addEventListener(type,fn)
        }
        let getElem = new jquery('app1')
        console.log(getElem)
        let str = "<h1>原生的js继承方式</h1>"
        getElem.html(str)
        getElem.on('click',function(){
            console.log("我成功了")
        })
    </script>
</body>
</html>